import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';

export const calendarStyle = style({
	backgroundColor: vars.color.baseBackground,
	display: 'inline-flex',
	flexDirection: 'column',
	border: `1px solid ${vars.color.border}`,
	userSelect: 'none',
	selectors: {
		'&[disabled]': {
			pointerEvents: 'none',
		},
	},
});

globalStyle(`${calendarStyle}>div.bar`, {
	display: 'flex',
	height: '3.5em',
	borderBottom: `1px solid ${vars.color.border}`,
});

globalStyle(`${calendarStyle}>div.bar>div`, {
	display: 'flex',
	textAlign: 'center',
	alignItems: 'center',
	justifyContent: 'center',
});

globalStyle(`${calendarStyle}>div.bar>div.title`, {
	flex: 1,
});

globalStyle(`${calendarStyle}>div.bar>div.btn`, {
	width: '4em',
	textAlign: 'center',
	cursor: 'pointer',
});

globalStyle(`${calendarStyle}>div.bar>div.btn:hover`, {
	backgroundColor: vars.color.lightFill,
});

globalStyle(`${calendarStyle}>div.body`, {
	display: 'grid',
	padding: '1em',
	height: '21em',
	width: '21em',
});

globalStyle(`${calendarStyle}>div[mode=year].body,${calendarStyle}>div[mode=month].body`, {
	gridTemplateColumns: '1fr 1fr 1fr',
});

globalStyle(`${calendarStyle}>div[mode=day].body`, {
	gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr 1fr',
});

globalStyle(
	`${calendarStyle}>div[mode=year].body>div.c0,${calendarStyle}>div[mode=year].body>div.c11,${calendarStyle}>div[mode=day].body>div.out`,
	{
		color: vars.color.secondaryText,
	}
);

globalStyle(`${calendarStyle}>div.body>div`, {
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	textAlign: 'center',
	cursor: 'default',
	userSelect: 'none',
	border: `1px solid transparent`,
});

globalStyle(`${calendarStyle}>div.body>div[disabled].disabled`, {
	pointerEvents: 'none',
	color: `${vars.color.disabledText}`,
});

globalStyle(`${calendarStyle}>div[mode=day].body>div`, {
	fontSize: '0.95em',
});

globalStyle(`${calendarStyle}>div[mode=day].body>div.week`, {
	color: vars.color.brand,
});
globalStyle(`${calendarStyle}>div[mode=day].body>div.week:hover`, {
	backgroundColor: 'transparent',
});

globalStyle(`${calendarStyle}>div.body>div.today`, {
	borderColor: vars.color.brand,
});

globalStyle(`${calendarStyle}>div.body>div:hover`, {
	backgroundColor: vars.color.lightFill,
});

globalStyle(`${calendarStyle}>div[keyboard].body>div.active`, {
	outline: `1px solid ${vars.color.info}`,
});

globalStyle(`${calendarStyle}>div.body>div.selected`, {
	//color: vars.color.white,
	backgroundColor: vars.color.activeFocus,
});
